import './emojiPopup.scss'
import React, { 
    FC, 
    useEffect, 
    useRef, 
    useState
} from "react"
import { emojiMap, emojiName, emojiUrl } from '../../../utils/emoji-map'
import { TabPanel, Tabs } from 'tea-component'
import fs from 'fs';
import Toast from '../../../components/toast/Toast';
import { useDispatch, useSelector } from 'react-redux';
import { updateUserInfo } from '../../../store/actions/user';
import Store from 'electron-store';

interface EmojiPopupProps {
    showCollect:boolean;
    callback: Function
}
const tabs = [
    { id: "basic", label: "通用" },
    { id: "network", label: "表情" },
    { id: "video", label: "视频" },
  ];
const store = new Store();
const getLocalSrc= (file_path:string)=>{
    const file = Toast.downPath +"\\"+ file_path;
    if(fs.existsSync(file)){
        const buf = fs.readFileSync(file);
        const bolb = new Blob([buf]);
        return URL.createObjectURL(bolb);
    }
    return "";
}

const getLocalVideo= (file_path:string)=>{
    const fileimg = file_path.replace(".mp4",".png");
    const file = Toast.downPath +"\\"+ fileimg;
    if(fs.existsSync(file)){
        const buf = fs.readFileSync(file);
        const bolb = new Blob([buf]);
        return URL.createObjectURL(bolb);
    }
    return "";
}
export const EmojiPopup: FC<EmojiPopupProps> = ({ callback,showCollect}): JSX.Element => {
    const refPopup = useRef(null)
    const dispatch = useDispatch();
    const {userId, collectinf} = useSelector((state: State.RootState) =>{
        return state.userInfo;});
    const [showList,setshowList] =useState(collectinf.imgs||[]);
    const [vdoList,setvdoList] =useState(collectinf.videos||[]);
    const showtas =!showCollect? tabs.filter(ele=>ele.id=="basic"):tabs
    useEffect(() => {
        document.addEventListener('click', handlePopupClick);
        return () => {
            document.removeEventListener('click', handlePopupClick);
        }
    }, []);

    const handlePopupClick = (e) => {
        if(!refPopup.current) return
        if (!refPopup.current.contains(e.target as Node) && refPopup.current !== e.target) {
            callback("")
        } 
    }
    const DeleteClick = (str) => {
        let array:string[] = collectinf.videos;
        array = array.filter(ele=>{
           return ele!== str;});
        collectinf.videos = array;
        setvdoList(array);
        dispatch(updateUserInfo({userId,collectinf }));
        store.set(userId+ 'collect', collectinf);
    }
    const handleDeleteClick = (str) => {
        //console.log("handleDeleteClick")
        let array:string[] = collectinf.imgs;
        array = array.filter(ele=>{
           return ele!== str;});
        collectinf.imgs = array;
        setshowList(array);
        dispatch(updateUserInfo({userId,collectinf }));
        store.set(userId+ 'collect', collectinf);
    }
    return (
        <div ref={refPopup} className="emoji-popup" >
            <Tabs tabs={showtas} placement="top">
                <TabPanel id="basic">
                    {
                        emojiName.map((v, i) => <span key={i} onClick={() => callback(v)}>
                            <img src={emojiUrl + emojiMap[v]} />
                        </span>)
                    }
                </TabPanel>
                <TabPanel id="network">
                    {
                        showList.map((v, i) => 
                        <span key={i} >
                            <img style={{width:"42px",height:"42px"}} src={getLocalSrc(v)} onClick={() => callback(v)}/>
                            <i className='emoji-delte' onClick={(e) =>{e.stopPropagation(); handleDeleteClick(v);return false;}} ></i>
                        </span>)
                    }
                </TabPanel>
                <TabPanel id="video">
                    {
                        vdoList.map((v, i) => <span key={i} >
                            <img style={{width:"42px",height:"42px"}} src={getLocalVideo(v)} onClick={() => callback(v)} />
                            <i className='emoji-delte' onClick={(e) =>{e.stopPropagation(); DeleteClick(v);return false;}} ></i>
                        </span>)
                    }
                </TabPanel>
            </Tabs>
        </div>
    )
}
